<template>
  <!-- placeholder="省、市、区(县)"  -->
  <view style="width: 100%;">
    <view class="select"
          :disabled="disabled"
          :class="{'text-placeholder':showValue===placeholder}"
          @click="showPicker">
      <text>{{showValue}}</text> 
      <image src="/static/img/select_arrow.png" />
    </view>
    <w-picker mode="linkage"
              :value="value"
              :options="options"
              :level="level"
              default-type="value"
              themeColor="#007aff"
              @confirm="onConfirm"
              ref="linkage" />
  </view>
</template>
<script>
import wPicker from "@/components/w-picker/w-picker.vue";

// import { province, city, county } from "./region.js";
export default {
  name: "RegionPicker",
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    value: {
      type: Array
    },
    level: {
      type: Number,
      default: 3
    },
    placeholder: {
      type: String,
      default: "请选择"
    },
    options: {
      type: Array,
      default: () => []
    },
    disabled:{
      type:Boolean,
      default:false
    },
    label: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showText: ""
    };
  },
  computed: {
    showValue() {
      if(this.label) {
        return this.label
      }else if(this.showText) {
        return this.showText
      }else{
        let v = "";
        let o;
        let options = this.options;
        for (let i = 0; i < this.level; i++) {
          o = options.find(o => o.value === this.value[i]);
          if (o) {
            v += o.label;
            options = o.children || [];
          }
        }
        if (!v) {
          v = this.placeholder;
        }
       
        return v;
      }
    }
  },
  methods: {
    // setShowValue() {
    //   let v = "";
    //   let o;
    //   let options = this.options;
    //   for (let i = 0; i < this.level; i++) {
    //     o = options.find(o => o.value === this.value[i]);
    //     if (o) {
    //       v += o.label;
    //       options = o.children || [];
    //     }
    //   }
    //   if (!v) {
    //     v = this.placeholder;
    //   }
    //   this.showValue = v;
    //   return v
    // },
    showPicker() {
      if(this.disabled){
      	this.$refs.linkage.hide();
      }else{
      	this.$refs.linkage.show();
      }
    },
    onConfirm(value) {
      this.showText = value.result;
      this.$emit("change", value);
    }
  },
  components: {
    wPicker
  }
};
</script>
<style lang="scss">
.uni-input {
  display: flex;
  align-items: center;
}
.select{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
uni-image {
  width: 3rem;
  height: 1.5rem;
  margin-left: 2rem;
}
</style>